<template>
  <div>
    <github-corner class="github-corner" />
    <!-- 数量统计 -->
    <el-row :gutter="40" style="margin-top: 50px;margin-bottom: 50px">
      <!-- 文章数 -->
      <el-col :span="6">
        <el-card class="one-card"  @click="toPath('/modules')">
          <div class="card-panel-icon-wrapper icon-article">
            <el-icon size="40px"><Tickets /></el-icon>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              文章数
            </div>
            <span class="card-panel-num" >{{state.dataCount.articleCount}}</span>
          </div>
        </el-card>
      </el-col>

      <!-- 总访问量 -->
      <el-col :span="6">
        <el-card class="one-card">
          <div class="card-panel-icon-wrapper icon-view">
            <el-icon size="40px"><View /></el-icon>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              总访问量
            </div>
            <span class="card-panel-num" >{{state.dataCount.websiteViewCount}}</span>
          </div>
        </el-card>
      </el-col>

      <!-- 评论量 -->
      <el-col :span="6">
        <el-card class="one-card">
          <div class="card-panel-icon-wrapper icon-comment">
            <el-icon size="40px"><ChatDotSquare /></el-icon>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              评论量
            </div>
            <span class="card-panel-num" >{{state.dataCount.commentCount}}</span>
          </div>
        </el-card>
      </el-col>

      <!-- 留言数 -->
      <el-col :span="6">
        <el-card class="one-card">
          <div class="card-panel-icon-wrapper icon-message">
            <el-icon size="40px"><Message /></el-icon>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              留言数
            </div>
            <span class="card-panel-num" >{{state.dataCount.messageCount}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 用户访问量图表 -->
    <el-row>
      <el-col :span="24">
        <el-card>
          <div style="height: 300px">
<!--            <v-chart :option="viewsCharts"/>-->
            <div ref="sevenData" style="width: 100%;height: 100%"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 博客排行，分类统计，标签统计 -->
    <el-row :gutter="30" style="margin-top: 50px">
      <el-col :span="8">
        <el-card class="two-card">
          <div class="e-title">文章阅读量排行</div>
          <el-table :data="state.blogViewCount" style="width: 100%;padding-top: 15px">
            <el-table-column label="标题" min-width="200">
              <template #default="scope">
                <el-link :underline="false">{{ scope.row.title }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="阅读量" prop="viewCount" width="100" align="center"/>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="two-card">
          <div style="width: 100%;height: 450px">
            <v-chart :option="categoryCharts"/>
          </div>
        </el-card>

      </el-col>
      <el-col :span="8">
        <el-card class="two-card">
          <div ref="tagCloud" style="width: 100%;height: 450px"></div>
        </el-card>
      </el-col>

    </el-row>

  </div>
</template>

<script lang="ts" setup>
import GithubCorner from '../../components/admin/GithubCorner/index.vue'
import {markRaw, nextTick, onBeforeMount, onMounted, reactive, ref} from 'vue'
import * as echarts from 'echarts';
import 'echarts-wordcloud/index.js';
import {Tickets,ChatDotSquare,Message,View} from "@element-plus/icons-vue";
import {getDataCount, getHotBlog, getCategoryCount, getTagCount, getSevenData} from "../../api/dashboard.js"
import router from "../../router";

const state = reactive({
  blogViewCount: [],
  tagCount: [],
  dataCount: {},
})
const categoryCount = ref([]);

const categoryCharts = ref({
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  title: {
    text: '分类统计'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    bottom: '25%',
    left: 'center',
  },
  series: [
    {
      name: '分类统计',
      type: 'pie',
      roseType: 'radius',
      radius: [15, 95],
      center: ['48%', '35%'],
      data: categoryCount,
      animationEasing: 'cubicInOut',
      animationDuration: 2600,
    },
  ],
});
const sevenData = ref<HTMLElement>();
const sevenCharts = ref<any>()
const tagCloud = ref<HTMLElement>();
const tagCharts = ref<any>()

const _getDataCount = ()=>{
  getDataCount().then((res:any)=>{
    state.dataCount = res.data
  })
}

const _getHotBlog = ()=>{
  getHotBlog().then((res:any)=>{
    state.blogViewCount = res.data
  })
}

const _getCategoryCount = ()=>{
  getCategoryCount().then((res:any)=>{
    categoryCount.value = res.data
  })
}

const _getTagCount = ()=>{
  getTagCount().then((res:any)=>{
    state.tagCount = res.data
    tagCharts.value = echarts.init(tagCloud.value!)
    tagCharts.value.setOption({
      backgroundColor: '#fff', // canvas背景颜色
      // canvas标题配置项
      title: {
        text: '标签统计',
        top: '0%',
        left: '0%',
        textStyle: {
          fontSize: 18,
          color: '#3B3E41',
          fontWeight: 'bold'
        }
      },
      series: [
        {
          type: 'wordCloud',
          left: '0%',                 // X轴偏移量
          top: '-2%',                  // Y轴偏移量
          width: '100%',               // canvas宽度大小
          height: '100%',              // canvas高度大小
          sizeRange: [20, 80],         //  词典字体大小范围配置
          rotationRange: [-90, 90],       // 词典字体旋转角度配置，默认不旋转
          rotationStep: 45,
          gridSize: 5,                // 词典字体间距配置
          layoutAnimation: true,       // 为false词典过度会阻塞
          textStyle: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            // Color can be a callback function or a color string
            color: function () {
              let colors = ['#fe9a8bb3', '#fe9a8bb3', '#fe9a8b03', '#9E87FFb3', '#9E87FFb3', '#9E87FFb3', '#fe9a8bb3', '#fe9a8bb3', '#fe9a8bb3', '#73DDFF', '#58D5FF']
              return colors[Math.round(Math.random() * 10)]
            }
          },
          emphasis: {
            focus: 'self',
            textStyle: {
              textShadowBlur: 2,
              textShadowColor: '#fff'
            }
          },
          // 渲染词典数据
          data: state.tagCount
        }
      ]
    })
  })
}

const _getSevenDayData = ()=>{
  getSevenData().then((res:any)=>{
    sevenCharts.value = markRaw(echarts.init(sevenData.value!))
    sevenCharts.value.setOption({
      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
      title: {
        text: '近七日数据总量记录'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['博客新增','评论新增','留言新增','标签新增',"访问量新增"]
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: res.data.sevenDayName
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '博客新增',
          type: 'line',
          stack: 'Total',
          smooth: true,
          zlevel: 1,
          z: 1,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.6,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(128, 255, 165)'
              },
              {
                offset: 1,
                color: 'rgb(1, 191, 236)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: res.data.blogAddCount
        },
        {
          name: '留言新增',
          type: 'line',
          stack: 'Total',
          smooth: true,
          zlevel: 2,
          z: 2,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.6,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(0, 221, 255)'
              },
              {
                offset: 1,
                color: 'rgb(77, 119, 255)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: res.data.messageAddCount
        },
        {
          name: '评论新增',
          type: 'line',
          stack: 'Total',
          smooth: true,
          zlevel: 3,
          z: 3,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.6,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(55, 162, 255)'
              },
              {
                offset: 1,
                color: 'rgb(116, 21, 219)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: res.data.commentAddCount
        },
        {
          name: '标签新增',
          type: 'line',
          stack: 'Total',
          smooth: true,
          zlevel: 4,
          z: 4,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          label: {
            show: true,
            position: 'top'
          },
          areaStyle: {
            opacity: 0.6,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(255, 0, 135)'
              },
              {
                offset: 1,
                color: 'rgb(135, 0, 157)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: res.data.tagAddCount
        },
        {
          name: '访问量新增',
          type: 'line',
          stack: 'Total',
          smooth: true,
          zlevel: 5,
          z: 5,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          label: {
            show: true,
            position: 'top'
          },
          areaStyle: {
            opacity: 0.6,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(255, 191, 0)'
              },
              {
                offset: 1,
                color: 'rgb(224, 62, 76)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: res.data.visitAddCount
        }
      ]
    })
  })
}

const toPath = (path: string)=>{
  router.push(path)
}

onBeforeMount(()=>{
  // 作用是请求结束后再渲染DOM
  nextTick(()=>{
    _getSevenDayData()
    _getDataCount()
    _getHotBlog()
    _getCategoryCount()
    _getTagCount()
  })
})


</script>
<style scoped lang="scss">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.one-card {
  width: 300px;
  height: 130px;
  cursor: pointer;
  &:hover {
    .card-panel-icon-wrapper {
      color: #fff;
    }

    .icon-comment {
      background: #40c9c6;
    }

    .icon-message {
      background: #36a3f7;
    }

    .icon-article {
      background: #f4516c;
    }

    .icon-view {
      background: #34bfa3
    }
  }

  .icon-comment {
    color: #40c9c6;
  }

  .icon-message {
    color: #36a3f7;
  }

  .icon-article {
    color: #f4516c;
  }

  .icon-view {
    color: #34bfa3
  }

  .card-panel-icon-wrapper {
    float: left;
    margin: 8px 0 0 14px;
    padding: 16px;
    transition: all 0.38s ease-out;
    border-radius: 6px;
  }

  .card-panel-icon {
    float: left;
    font-size: 48px;
  }

  .card-panel-description {
    float: right;
    font-weight: bold;
    margin: 18px;
    margin-left: 0px;

    .card-panel-text {
      line-height: 18px;
      color: rgba(0, 0, 0, 0.45);
      font-size: 16px;
      margin-bottom: 12px;
    }

    .card-panel-num {
      font-size: 20px;
    }
  }
}
.two-card {
  width: 400px;
  height: 430px;
}

.card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);


}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
.github-corner {
  position: absolute;
  top: 0px;
  border: 0;
  right: 0;
}
.e-title{
  font-size: 18px;
  font-weight: bold;
}
</style>
